<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="collapse">
            <el-collapse v-model="activeName">
            <el-collapse-item :title='myTitle' name="1" class="my">
                <el-form v-model="dataForm" label-position="top" label-width="100px">
                    <!-- <el-form-item   class="item" label="指导记录id">
                        <el-input v-model="dataForm.recordsId" placeholder="指导记录id" type="textarea" maxlength="1000"
                            show-word-limit />
                    </el-form-item> -->
                    <!-- <el-form-item   class="item" label="指导教师教职工号">
                        <el-input v-model="dataForm.reTeacher" placeholder="指导教师教职工号" type="textarea" maxlength="1000" show-word-limit />
                    </el-form-item> -->
                    <el-form-item   class="item" label="对指导老师建议">
                        <el-input v-model="dataForm.reAdvise" placeholder="对指导老师建议" type="textarea" maxlength="100" show-word-limit />
                    </el-form-item>
                    <el-form-item   class="item" label="指导内容">
                        <el-input v-model="dataForm.reImfor" placeholder="指导内容" type="textarea" maxlength="500" show-word-limit />
                    </el-form-item>
                    <el-form-item   class="item" label="指导收获">
                        <el-input v-model="dataForm.reHarvest" placeholder="指导内容" type="textarea" maxlength="500" show-word-limit />
                    </el-form-item>
                    <el-form-item   class="item">
                        <el-button icon="el-icon-upload" type="primary" @click="submitGuidance()">完成</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        </div>
        
        
        <el-form>
            <el-form-item>
                <el-button  type="danger" @click="handleDelete()"
          :disabled="dataListSelections.length <= 0">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-form 
            :inline="true" 
            v-model="SearchForm" 
             @keydown.enter.native.prevent="getDataList()">
            
            <el-form-item>
                <el-input v-model="SearchForm.recordsId" placeholder="指导编号" type="text" />
                <!-- maxlength="10" show-word-limit -->
            </el-form-item>
            <!-- <el-form-item>
                <el-select filterable v-model="SearchForm.cgyepart" placeholder="所属院系">
                    <el-option label="计算机科学" value="计算机科学"></el-option>
                    <el-option label="网络工程" value="网络工程"></el-option>
                    <el-option label="软件工程" value="软件工程"></el-option>
                    <el-option label="教育技术" value="教育技术"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select filterable :default-first-option="true" v-model="SearchForm.cgySource" placeholder="课题来源">
                    <el-option label="教师" value=2 key="教师"></el-option>
                    <el-option label="学生" value=1 key="学生"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button    @click="getDataList()">查询</el-button>
                <!-- <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
            </el-form-item>
        </el-form>
        
        <!-- "showDataList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" -->
        <el-table 
            :data="dataList" border
            tooltip-effect="dark" 
            v-loading="dataListLoading"
            style="width: 100%" >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" label="编号" width="50"></el-table-column>
            <el-table-column prop="recordsId" header-align="center" align="center" show-overflow-tooltip width="150" label="指导记录id"  >
            </el-table-column>
            <el-table-column prop="reTeacher" header-align="center" align="center" show-overflow-tooltip width="150" label="指导教师教职工号"  >
            </el-table-column>
            <el-table-column prop="reAdvise" header-align="center" align="center"  show-overflow-tooltip width="150" label="对指导老师建议" >
            </el-table-column>
            <el-table-column prop="reImfor" header-align="center" align="center" show-overflow-tooltip width="150" label="指导内容" >
            </el-table-column>
            <el-table-column prop="reHarvest" header-align="center" align="center" show-overflow-tooltip width="150" label="指导收获" >
            </el-table-column>
            <el-table-column prop="gmtModified" header-align="center" align="center" show-overflow-tooltip  label="修改时间"  >
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
                <template slot-scope="scope" >
                    <el-button size="mini" icon="" type="text" @click="handleEdit(scope.row)">
                        <!-- scope.$index, -->
                        修改</el-button>
                        <el-button size="mini" icon="" type="text"
                        @click="handleDelete(scope.row.recordsId)">
                        删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination              
            @size-change="sizeChangeHandle"         @current-change="currentChangeHandle"
            :current-page="currentPage" 
            :page-sizes="[10, 20, 50, 100]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="totalPage">
        </el-pagination>

        
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
</template>

<script>

import servicesApi from '@/services/servicesApi';
import AddOrUpdate from './guidance-add-or-update.vue';
import debounce from 'lodash/debounce';
export default {
    name: 'Table',
    data() {
        return {
            myTitle: '提交指导记录',
            activeName: '', //折叠面板
            SearchForm: {
                // cgyName:'',
                // tusername:'',
                // cgyepart: '',
                // cgySource: null, // 1学生，2老师
                // status: 0,
                // susername: '',
                recordsId: '',
            },

 
        dataForm: {
            reAdvise: '',
            reHarvest: '',
            reImfor: '',
            reTeacher: '',
            reTarget: '',
            stuSituation: '',
            recordsId: '',
        },
        UpdateForm: {
            reAdvise: '',
            reHarvest: '',
            reImfor: '',
            reTeacher: '',
            reTarget: '',
            stuSituation: '',
            recordsId: '',
        },
        dataListLoading: false, //加载状态
        dataListSelections: [], // 多选 
        addOrUpdateVisible: false, // 可见性
        currentPage: 1,    // 当前页
        pageSize: 10,      // 每页大小，默认10
        totalPage: 0,     // 数据总数
        dataList: [],     // 原始table数据
        showDatas: [],     // 展示的table数据
        dataListSelections: [], //多选recordsId
        deleteList: {
                list: []
             }
       }
    },
    created() {
        this.getDataList()   // 页面初始化，请求数据并在表格显示
    },
    components: {
        AddOrUpdate
    },
    methods: {
        // deleteMyTopic(){
        //     if (!this.myTopic.cgyName){
        //         return this.$message.error('当前未选择课题')
        //     }
        //     this.$confirm(`确定对[课题=${this.myTopic.cgyName}]进行['删除']操作?`, '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         servicesApi.delGuidance().then( res=>{
        //             // console.log(res.data)
        //             let code = res.data.code
        //             if (code === 200) {
        //                 this.$message({
        //                     message: '操作成功',
        //                     type: 'success',
        //                     duration: 500,
        //                     onClose: () => {
        //                         this.getDataList() 
        //                     }
        //                 })
        //             } else {
        //                 this.$message.error(res.data.msg)
        //             }
        //         })
        //     }).catch(() => { })
        // },
        // Stopic(){
        //     this.$router.push({ path:'Student-topicDeclare'})
        // },
        // getTopicInfo(cgyId){
        //     this.addOrUpdateVisible = true
        //     this.$nextTick(() => {
        //         // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
        //         this.$refs['addOrUpdate'].init(cgyId)
        //     })
        // },
        // 获取数据
        getDataList: debounce(function() {
            this.dataListLoading = true
            let pageInfo = {
                current: this.currentPage,
                size: this.pageSize,
                // ...this.SearchForm, //解构赋值
                // cgyDepart: this.SearchForm.cgyepart,
                // cgyName: this.SearchForm.cgyName,
                // cgySource: this.SearchForm.cgySource === null?2:this.SearchForm.cgySource,
                // // current: 1,
                // // size: 10,
                // status: this.SearchForm.status,
                // susername: this.SearchForm.susername,
                // tusername: this.SearchForm.tusername
                name: this.SearchForm.recordsId
            }
     
            this.$servicesApi.getGuidance(pageInfo).then(res => {
                // console.log(res.data)
                let code = res.data.code
                let data = res.data.data
                if (code === 200) {
                    this.dataList = data.list
                    this.totalPage = data.total
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        }, 1000, { 'leading': true, 'trailing': false }),
        // 1.改变页面选项触发的方法（val:显示的每页大小）
        sizeChangeHandle(val) {
            this.currentPage = 1;   // 跳转第一页
            this.pageSize = val     // 每页大小赋值给绑定的pageSize
            this.getDataList()
            // this.showDataList = this.dataList.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);   // 抓取区间数据
        },

        // 2.改变页码触发的方法(val:触发的当前页码)
        currentChangeHandle(val) {
            this.currentPage = val;  // 跳转当前页
            this.getDataList()
            // this.showDataList = this.dataList.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);   // 抓取区间数据
        },
        // 3.排序监听
        sortChange(column) {
            this.dataList = this.dataList.sort(
                this.SortFun(column.prop, column.order === 'ascending')
            );
            this.showDataList = this.dataList.slice(0, this.pageSize);
            this.pageIndex = 1;
        },

        // 4.排序方法
        SortFun(attr, rev) {
            this.pageIndex = 1;
            //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
            if (rev == undefined) {
                rev = 1;
            } else {
                rev = rev ? 1 : -1;
                //rev = rev>0 ? 1 : -1;
            }
            return function(a, b) {
                a = a[attr];
                b = b[attr];
                if (a != null) {
                    // 1.列数据类型为string时的排序
                    if (typeof a == 'string') {
                        // 1.1 判断是否为日期类型
                        if (a.split(' ').length === 2) {
                            if (a < b) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        } else if (!isNaN(a)) {
                            // 是否能转为数字类型
                            // // console.log("字符数字类型",attr,a)
                            if (parseFloat(a) < parseFloat(b)) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        }
                        else {
                            // 1.2 普通字符类型
                            //// console.log("普通字符类型",attr,a)
                            if (a < b) {
                                return rev * -1;
                            }
                            if (a > b) {
                                return rev * 1;
                            }
                            return 0;
                        }
                    }
                    // 2. 列数据类型为number时的排序
                    if (typeof a == 'number') {
                        //// console.log("Number型:", a);
                        if (a < b) {
                            return rev * -1;
                        }
                        if (a > b) {
                            return rev * 1;
                        }
                        return 0;
                    }
                }
            };
        },
        handleEdit(id) {
            // // console.log('+++++++修改开题报告++++')
            // // console.log(row)
            // if (row === null) {
            //     this.activeName = '1'
            //     return;
            // }
            // this.dataForm.plan = row.plan
            // this.dataForm.prospect = row.prospect
            // this.dataForm.route = row.route 
            // this.activeName = '1'
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
            // this.$refs.addOrUpdate.dataForm.id = id
            this.$refs['addOrUpdate'].init(id)
            })
        },
        handleDelete(id) {
            let roleIds = id ? [id] : this.dataListSelections.map(item => {
            return item.recordsId
        })
        this.deleteList.list = roleIds
            servicesApi.delGuidance(this.deleteList).then(res => {
                // console.log(res.data)
                let code = res.data.code
                if (code === 200) {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.getDataList()
                        }
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'danger',
                        duration: 1000,
                        onClose: () => {
                            this.getDataList()
                        }
                    })
                }
            })
        },
        //提交指导记录 
        submitGuidance() {
            servicesApi.recordForm(this.dataForm).then(res => {
                let code = res.data.code
                if (code === 200) {
                    this.$message({
                        message: '提交成功',
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.getDataList()
                            this.activeName = null
                            this.dataForm = {}
                        }
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 1000,
                        onClose: () => {
                            this.getDataList()
                            this.activeName = null
                            this.dataForm ={}
                        }
                    })
                }
            })
        },
        // 多选
        selsChange(val) {
      this.dataListSelections = val
        },
        // // 新增 / 修改
        // addOrUpdateHandle(id, state) {
        //     this.addOrUpdateVisible = true
        //     this.$nextTick(() => {
        //         // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
        //         this.$refs['addOrUpdate'].init(id, state)
        //     })
        // },

        
    },
    
};
</script>

<style scoped>
.collapse>>>.el-collapse {
    border: none;
}
.my>>>.el-collapse-item__header {
    /* background-color: rgb(241, 244, 245); */
    color: blue;
    padding: 20px;
    font-size: medium;
}
.my>>>.el-collapse-item__wrap {
    /* background-color: #f1f4f5; */
    border: none;
}
.item>>>.el-form-item__label {
    /* color:red; */
    /* font-size: medium; */
    padding: 0px 20px;
}

.item>>>.el-form-item__content {
    padding: 0px 20px;
    /* background-color: white; */
}

.my{
    margin: 20px 0px;
    /* background-color:red; */
}
.item{
    /* background-color:  rgb(64, 147, 174); */
    width: 100%;
}
</style>
